import { getFetch } from '@/utils/doFetch';
import { ClockCircleFilled, CloseOutlined, DeleteFilled } from '@ant-design/icons';
import { useModel, useLocation } from '@umijs/max';
import { useRequest } from 'ahooks';
import {
    Col,
    DatePicker,
    InputNumber,
    Modal,
    Row,
    Slider,
    Dropdown,
    theme
} from 'antd';
import dayjs from 'dayjs';
import { useEffect, useMemo, useState } from 'react';
import { items } from '@/utils/global';
import { v4 as uuidv4 } from 'uuid';







const ActionDropDown = ({ children, item, disabled, runAsync, nostate = false, isMine, setInitialState }) => {

    const [modal, setModal] = useState({
        open: false,
    });


    const {
        initialState: { selectedDate },
    } = useModel('@@initialState');

    const [time, setTime] = useState(0);
    const [workDate, setWorkDate] = useState(dayjs());


    useEffect(() => {
        if (dayjs(selectedDate).valueOf() > dayjs().valueOf()) {
            setWorkDate(dayjs());
        } else {
            setWorkDate(dayjs(selectedDate));
        }
    }, [selectedDate]);

    const itemes = useMemo(() => {
        let progress = [{
            label: '工时',
            icon: <ClockCircleFilled />,
            key: 'progress',
        }, {
            type: 'divider',
        },];

        if (item.status === 0) {
            progress = []
        }

        if ((!item.status && item.status !== 0) || (item.status === 2 || item.status === 4) || nostate) {
            return [
                ...progress,
                {
                    label: '回收站',
                    icon: <DeleteFilled></DeleteFilled>,
                    key: 'recycling',
                    danger: true,
                },
            ];
        }
        if (item.status === 3) {
            return [
                {
                    label: items[item.status].actionName,
                    key: items[item.status].key,
                    icon: items[item.status].icon,
                }, {
                    label: '彻底删除',
                    icon: <DeleteFilled></DeleteFilled>,
                    key: 'deleted',
                    danger: true,
                },
            ];
        }

        return [
            ...progress,
            item && {
                label: items[item.status].actionName,
                key: item.status,
                icon: items[item.status].icon,
            },
            {
                type: 'divider',
            },
            {
                label: '回收站',
                icon: <DeleteFilled></DeleteFilled>,
                key: 'recycling',
                danger: true,

            },

        ]
    }, [item, items]);

    const doNext = async (key) => {
        if (key === 'progress') {
            setModal((s) => ({
                ...s,
                open: true,
                type: 'progress',
                title: '工时',
            }));
            return;
        }
        if (key === 'recycling') {
            await runAsync({
                url: '/item/' + item?.id,
                params: { status: 3 },
                method: 'PUT',
            });
            setInitialState(s => ({
                ...s,
                updateProject: uuidv4(),
            }))
            return;
        }
        if (key === 'deleted') {
            runAsync({
                url: `/item/${item?.id}`,
                params: {},
                method: 'DELETE',
            });
            return;
        }
        if (key === 'reset') {
            runAsync({
                url: `/item/removeRecycle/${item?.id}`,
                params: {},
                method: 'PUT',
            });
            setInitialState(s => ({
                ...s,
                updateProject: uuidv4(),
            }))
            return;
        }

        if (item?.status === 2) return;
        if (item?.status === 3) { }
        if (item?.status === 0) {
            runAsync({
                url: '/item/' + item?.id,
                params: { status: 1 },
                method: 'PUT',
            });
        } else if (item?.status === 1) {
            runAsync({
                url: '/item/' + item?.id,
                params: { status: 2 },
                method: 'PUT',
            });
        }
    };




    return (
        <>
            <Dropdown
                disabled={disabled || !isMine}
                menu={{
                    items: itemes,
                    onClick: ({ key, domEvent }) => {
                        domEvent.stopPropagation();
                        doNext(key);
                    }
                }}
                trigger={['contextMenu']}
            >

                {children}
            </Dropdown>
            <div onClick={(e) => {
                e.stopPropagation();
            }}>
                <Modal
                    {...modal}
                    style={{ top: modal?.type === 'progress' ? 60 : 12 }}
                    onCancel={() => {
                        setModal((s) => ({
                            ...s,
                            open: false,
                        }));
                    }}
                    maskClosable={false}
                    onOk={() => {
                        runAsync({
                            url: '/item/' + item?.id,
                            params:
                                item?.status === 1
                                    ? { time, workDate: workDate.format('YYYY-MM-DD') }
                                    : { time, workDate: workDate.format('YYYY-MM-DD') },
                            method: 'PUT',
                        });
                        setModal((s) => ({
                            ...s,
                            open: false,
                        }));
                        setTime(null);
                    }}
                    destroyOnClose={true}
                    width={360}
                >
                    <Row>
                        <Col
                            span={24}
                            className="centerl"
                            style={{ margin: '16px 0', width: '100%', gap: 12 }}
                        >
                            <label>消耗工时:</label>
                            <span>
                                {item?.actualTime} 小时 / 计划{item?.planTime ?? '-'}小时
                            </span>
                        </Col>
                        <Col span={24} className="centerl" style={{ width: '100%', gap: 12 }}>
                            <label>添加工时:</label>
                            <InputNumber size="small" min={0} max={100000} value={time} onChange={setTime} />
                            <span>小时</span>
                        </Col>
                        <Col
                            span={24}
                            className="centerl"
                            style={{ margin: '16px 0 0 0 ', width: '100%', gap: 12 }}
                        >
                            <label>发生日期:</label>
                            <DatePicker
                                disabledDate={(current) => {
                                    return current && current > dayjs().endOf('day');
                                }}
                                value={workDate}
                                onChange={setWorkDate}
                                variant="filled"
                                style={{ flex: 1 }}
                            />
                        </Col>
                    </Row>
                </Modal>
            </div>
        </>

    );
};
export default ActionDropDown;